<template>
    <div>
        <div class="personal-teacher-top">
            <span class="personal-teacher-span">
                我的比赛
            </span>
        </div>

        <!-- 状态栏 -->
        <div class="race-state">
            <p>赛事状态：</p>
            <div class="race-state-item" v-for="(item, index) in statusOptions" :key="index">
                <button :class="{ active: index == selectedStatus }" @click="updateFilteredData(index)">{{ item }}</button>
            </div>
        </div>

        <el-scrollbar max-height="550px">
            <div class="buffer">
                <NoData v-if="bannerData.length === 0 && !loadingFailed">
                    稍等片刻&nbsp;数据正在赶来...
                </NoData>
                <NoData v-if="loadingFailed">
                    加载失败&nbsp;请稍后重试
                </NoData>
            </div>
            <div class="sco">
                <div class="race">
                    <div class="race-item" v-for="item in bannerData" :key="item.userContestId">
                        <div class="race-txt">
                            <h2>{{ item.name }}</h2>
                            <p>{{ item.academy }}</p>
                        </div>
                        <p class="race-time">{{ item.registrationTime }}</p>
                        <div class="race-edit">
                            <!-- status是作品的状态 -0 未上传 ; -1 已上传 -->
                            <!-- workid 是作品id -->
                            <!-- contestStatus 是比赛的状态 非进行中则不允许上传 -->
                            <button :class="(item.status == 1 || item.contestStatus != 1) ? '' : 'raceup'"
                                :disabled="item.status == 1 || item.contestStatus != 1"
                                @click="changeWork(item.contestId, item.contestType, item.workId)">{{ item.status ? '已上传' :
                                    '上传作品' }}</button>
                            <!-- 修改作品 - 有作品id 则可以修改作品,若已经结束，即便有作品id，也无法修改作品,修改作品颜色消失 -->
                            <button :class="(item.status == 0 || item.contestStatus == 2) ? '' : 'view'"
                                :disabled="item.status == 0 || item.contestStatus == 2"
                                @click="changeWork(item.contestId, item.contestType, item.workId)">修改作品</button>
                            <!-- ||item.status=='' -->
                            <!-- item.status ==0 未上传 则查看作品禁止按钮 -->
                            <button :class="item.status == 0 ? '' : 'check'" :disabled="item.status == 0"
                                @click="toWork(item.workId)">查看作品</button>
                            <!-- 未上传作品和比赛未结束则可以取消报名 -->
                            <button class='Cancel' @click="deleteRace(item)"
                                :disabled="item.status == 1 || item.contestStatus == 2">取消报名</button>
                        </div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <UploadWork ref="uploadWork" @refresh="updateFilteredData(0)" />
    </div>
</template>

<script setup>
import NoData from '@/components/NoData.vue';
import UploadWork from '@/views-front/PersonalView/UploadWork/UploadWork.vue'
import { ref, onMounted, } from "vue";
import { useRouter } from 'vue-router'
import { GetMyRace, CancelRace, } from "@/api/front/contest";
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex';

// 判断NoData是否显示
const loadingFailed = ref(false);

const uploadWork = ref(null);
const changeWork = (id, type, workId) => {
    uploadWork.value.openDialog(id, type, workId)
}

const bannerData = ref([]);

const store = useStore();
const userInfo = store.state.userInfo
let data = {
    //传入比赛状态
    contestStatus: '',
    userContestId: userInfo.userId,
}

//获取比赛数据
const getRace = async () => {
    try {
        //data中的contestStatus和userContestId传入
        const res = await GetMyRace(data); // GetMyRace是一个获取比赛数据的函数
        console.log('res', res);
        bannerData.value = res.data;
        console.log('bannerdata', bannerData.value);
        // await getContest();
    } catch (err) {
        console.log('err', err);
        loadingFailed.value = true;
    }
};


//删除赛事列表
const deleteRace = async (item) => {
    const racedata = {
        id: item.userContestId,
    }
    try {
        const res = await CancelRace(racedata);  //等待CancelRace函数的结果
        console.log(res.racedata);
        const index = bannerData.value.findIndex(race => race.userContestId === item.userContestId);
        if (index !== -1) {
            bannerData.value.splice(index, 1);
            // 显示确认消息或执行任何其他必要的操作
            cancelRace();
        }
    } catch (err) {
        console.log('err', err);
    }
};

//成功取消--提示框
const cancelRace = () => {
    ElMessage({
        message: '您已成功取消报名',
        type: 'success',
    })
}

//查看作品路径
const router = useRouter()
const toWork = (workId) => {
    router.push({
        path: '/work-detail/' + workId + '/work-introduce'
    })
    console.log('world', workId);
}

// 生命周期里面请求
onMounted(() => {
    updateFilteredData(0)
})



//筛选数据
const selectedStatus = ref(0);
const statusOptions = ref(["全部", "进行中", "已结束"]);
const updateFilteredData = (index) => {
    selectedStatus.value = index
    if (index !== 0) {//筛选按钮不是“全部”时 data.contestStatus是我要传入赛事状态，当我点击其中 就赋值
        data.contestStatus = index
        console.log('00', index);
        getRace()
    } else {//筛选按钮为“全部”时
        data.contestStatus = ""
        getRace()
    }
    console.log('contesstatus', data.contestStatus)
    console.log('index', index);
}



</script>

<style scoped lang="scss">
button {
    /* 清除默认边框 */
    border: 0;
    outline: none;
    /*清除默认背景 */
    background-color: transparent;
}

button.active {
    background-color: white;
}

.sco {
    height: 470px;
}

.race-state {
    display: flex;
    width: 670px;
    height: 40px;
    align-items: center;
    background-color: #DFEDFB;
    border-radius: 5px;
    margin: 0 0 10px 38px;

    p {
        margin-left: 10px;
    }

    .race-state-item {
        margin-left: 10px;

        button {
            width: 70px;
            height: 25px;
            border-radius: 15px;
            margin-left: 20px;
        }
    }
}

.race-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 670px;
    height: 100px;
    margin:20px 0 10px 38px;
    box-shadow: -2px 2px 11px 3px rgba(0, 0, 0, .15);
    border-radius: 10px;

    .race-txt {
        width: 35%;
        height: 80%;

        p {
            margin:24px 0 0 15px;
        }

        h2 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 50px;
            margin: 0 0 -20px 15px;
        }
    }

    .race-time {
        display: flex;
        font-size: 12px;
        margin-top: 60px;
        width: 10%;
    }



    .race-edit {
        width: 55%;
        // margin-left: -100px;

        button {
            width: 23%;
            height: 40px;
            margin-left: 10px;
            background-color: #E6E6E6;
            border-radius: 20px;
            font-size: 12px;

        }

        .raceup {
            background-color: #DBC2FB;
        }

        .view {
            background-color: #9FCAF2;
            color: black;
        }

        .check {
            background-color: #BFD99A;
            color: black;

        }
    }
}


.Cancel {
    width: 60px !important;
    font-size: 12px;
    cursor: pointer;
}
</style>

